<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">

    <title>立即评价</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        .txtare{
            width: 100%;
            border: none;
            padding: .2rem;
            box-sizing: border-box;
        }
        .footer-btn{
            background: #5f3104;
            height: .64rem;
            border-radius: .04rem;
            line-height: .64rem;
            color: #fff;
            text-align: center;
            width: 80%;
            margin: 20px auto;
        }
        .ti{
            color: #5f3104;
            padding: 0 .2rem;
            box-sizing: border-box;
            font-size: 12px;
            line-height: .88rem;
        }
        .tk-obj{
            padding: 0 .2rem;
            box-sizing: border-box;
            line-height: .88rem;
            position: relative;
        }
        .sele{
            position: absolute;
            height: .88rem;
            top: 0;
            left: .2rem;
            width: 90%;
            opacity: 0;
        }
        .triangle-down {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid #999;
            display: inline-block;
            margin-top: .05rem;
            position: absolute;
            right: .2rem;
            top: 0.35rem;
        }
        .money{
            padding: 0 .2rem;
            box-sizing: border-box;
        }
        .footer-btn{
            background: #5f3104;
            height: .64rem;
            border-radius: .04rem;
            line-height: .64rem;
            color: #fff;
            text-align: center;
            width: 80%;
            margin: 20px auto;
        }

        .upload_box {
            width: 100%;
            /* margin: 1em auto; */
        }
        .Publish_goods textarea{
            font-size: 14px;
        }
        body{
            background: #fff;
        }

        .upload_drag_area {
            display: inline-block;
            width: 60%;
            padding: 4em 0;
            margin-left: .5em;
            border: 1px dashed #ddd;
            background: #fff url(drag.png) no-repeat 20px center;
            color: #999;
            text-align: center;
            vertical-align: middle;
        }

        .upload_drag_hover {
            border-color: #069;
            box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
            color: #333;
        }

        .upload_preview {
            background-color: #fff;
            overflow: hidden;
            _zoom: 1;
            float: left;
        }

        .upload_append_list {
            /* height: 300px; */
            margin-right: 8px;
            width: 60px;
            height: 60px;
            float: left;
            position: relative;
        }

        .upload_devare {
            margin-left: 2em;
            background: url('../img/删除@2x.png') no-repeat center;
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: contain;
        }



        .upload_submit_btn {
            display: none;
            height: 32px;
            font-size: 14px;
        }

        .upload_loading {
            height: 250px;
            background: url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
        }

        .upload_progress {
            display: none;
            padding: 5px;
            border-radius: 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, .6);
            position: absolute;
            left: 25px;
            top: 45px;
        }
        .upimg{
            width: 60px;
            height: 60px;
        }
    </style>
    <script src="../js/jquery-1.8.3.min.js"> </script>
    <script src="../js/exif.js"></script>
    <script src="../js/public.js"></script>
</head>

<body>
<div>


</div>
<div>
    <textarea name="" class="txtare" id="" cols="30" rows="10" placeholder="请填写您的评价"></textarea>
</div>
<div id="content" class="show" style="overflow: hidden;">
    <div class="demo">
        <div class="upload_box">
            <div class="upload_main">
                <div id="preview" class="upload_preview"></div>
                <div class="upload_choose" style="float: left;position: relative;">
                    <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px;display: block;' id="add_img" >
                    <input id="fileImage" type="file"  style="width: 60px;height: 60px;position: absolute;top: 0;opacity: 0;" onchange="selectFileImage(this)"/>
                </div>
            </div>
            <div class="upload_submit">
                <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
            </div>
        </div>
    </div>
</div>
<div>
    <span>评分</span>
    <span>
        <img style="width: 10px;" src="../img/comment1.png" alt="">
        <img style="width: 10px;" src="../img/comment1.png" alt="">
        <img style="width: 10px;" src="../img/comment1.png" alt="">
        <img style="width: 10px;" src="../img/comment1.png" alt="">
        <img style="width: 10px;" src="../img/comment1.png" alt="">
    </span>
</div>
<div class="footer-btn">
    确认发表
</div>
<script>
    function selectFileImage(fileObj) {

        var $len = $("#preview .img-div").length;
        if($len == 3){
            alert("对不起，最多可以上传3张哦！");
            return false;
        }

        var obj = fileObj;
        var file = fileObj.files['0'];

        var $par = $(this).parent().find(".upload_preview");
        var Orientation = null;

        if (file) {


            //获取照片方向角属性，用户旋转控制
            EXIF.getData(file, function () {
                // //alert(EXIF.pretty(this));
                EXIF.getAllTags(this);
                ////alert(EXIF.getTag(this, 'Orientation'));
                Orientation = EXIF.getTag(this, 'Orientation');
                //return;
            });

            var oReader = new FileReader();
            oReader.onload = function (e) {
                //var blob = URL.createObjectURL(file);
                //_compress(blob, file, basePath);
                var image = new Image();
                image.src = e.target.result;
                image.onload = function () {
                    var imgWidth = this.width;
                    var imgHeight = this.height;

                    // 控制上传图片的宽高
                    if (imgWidth > imgHeight && imgWidth > 750) {
                        imgWidth = 750;
                        imgHeight = Math.ceil(750 * this.height / this.width);
                    } else if (imgWidth < imgHeight && imgHeight > 1334) {
                        imgWidth = Math.ceil(1334 * this.width / this.height);
                        imgHeight = 1334;
                    }
                    var canvas = document.createElement("canvas"),
                        ctx = canvas.getContext('2d');
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                    if (Orientation && Orientation != 1) {
                        switch (Orientation) {
                            case 6:     // 旋转90度
                                canvas.width = imgHeight;
                                canvas.height = imgWidth;
                                ctx.rotate(Math.PI / 2);
                                // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                                break;
                            case 3:     // 旋转180度
                                ctx.rotate(Math.PI);
                                ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                                break;
                            case 8:     // 旋转-90度
                                canvas.width = imgHeight;
                                canvas.height = imgWidth;
                                ctx.rotate(3 * Math.PI / 2);
                                ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                                break;
                        }
                    } else {
                        ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                    }
                    base64 = canvas.toDataURL("image/jpeg", 0.8);

                    var $par = $(obj).parent().siblings(".upload_preview");
                    var newsIndex = base64.indexOf(",");
                    var news = base64.substr(parseInt(newsIndex + 1));
                    console.log(news);
                    $.ajax({ //上传头像
                        type: "post",
                        url: base_url+"ZITAOHUI/upload/image",
                        data:{
                            imageData:news
                        },
                        dataType: "json",
                        success: function (data) {
                            //////console.log(data);
                            if (data.code == 1) {
                                console.log("上传成功");
//                                    _imgarr.push(
//                                        {
//                                            id: data_id,
//                                            url: data.fileUrl
//                                        }
//                                    );
                                var _url = data.extend.msg.fileUrl;
//                                saveHeaImg(new_url);
                                $par.append('<div class="img-div" style="float: left;position: relative;margin-right: 10px;"><img class= "upimg" imgurl="' + _url + '" src=' + base64 + '><img src="../img/del@2x.png" onclick="delImg(this)" style="width: 12px;position: absolute;top: 2px;right: 0;"></div>');

                            } else{
                                alert("上传失败");
                            }
                        },
                        error: function (error) {

                        }
                    })
                    ////console.log(news);

                };
            };
            oReader.readAsDataURL(file);
        }
    }
    function delImg (obj){
        $(obj).parent().remove();
    }
</script>
</body>
</html>